<template>
      <!-- 05 导航 router-link -->
  <div class="nav">
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">主页</router-link>
    <router-link to="/channel">频道</router-link>
    <router-link to="/my">我的</router-link>
    <!-- <router-link to="/play/6666">播放电影666</router-link> -->

    <!-- 图标的引入 -->


    <!-- 06- 03 在页面上使用。 -->
    <!-- font-awesome 图标库-->
    <a class="fa fa-search search" @click="onShowHideChannel"></a>
    <!-- 阿里图标库 -->
    <!-- <a class="icon iconfont icon-hangkongfeiji" @click="onShowHideChannel"></a> -->
    <!-- <a class="icon iconfont icon-bowuguan"></a> -->

  </div>
</template>

<script>
export default{
    //属性
    data(){
        return {

        }
    },

    //方法
    methods:{
        onShowHideChannel(){
            console.log("显示隐藏工具栏。。")
        },
    }
}
</script>

<style lang="scss">

// 导航栏样式。
#navigator {
    position: fixed;
    top: 0;
    z-index: 9;
    width: 100%;


    .nav {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: #585858;
        line-height: 40px;
        
        a {
            padding: 5px 10px;
            color: white;
            text-decoration: none;
        }
        .search{
            font-size: 18px;
            padding: 15px 1px;
        }
    }
}

</style>